<template>

  <div class="all">
  <div class="top">
    <div class="top-pic"><img src="../assets/Vector (7).png" alt=""></div>
    <div class="colle">我的订单</div>
    
    </div>
    <div class="heng"></div>
        <div class="Content" v-if="!tableData.length">
      <div class="content">
        <div class="left">
          <img src="../assets/暂无收藏_1_.png" alt="" />
        </div>
        <div class="right">
          <span>你的购物车还是为空</span>
          <span>快去购物吧 </span>
        </div>
      </div>
    </div>
    <div class="pic" v-if="tableData.length">
    <div class="bianhao">
      <div class="bian">订单编号: <span>70081648646035240</span></div>
      <div class="shijian">订单时间: <span>2022-03-30 21:13:55</span></div>
    </div>
    <div class="heng1"></div>
    <div
          class="content2"
          v-for="(item, index) in tableData"
          :key="item.orderId"
        >
<div class="thing-list"  >
        <!-- <table>
          <thead>
            <tr>
              <th class="name">商品名称</th>
              <th class="dan">单价</th>
              <th class="la">数量</th>
              <th class="xj">小计</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="ming"><img src="../assets/Rectangle 166.png" alt="">
                <div class="xiao">Redmi K30 5G</div>
              </td>
              <td class="dan">2599元</td>
              <td class="sl">
                <input type="text" placeholder="1">
              </td>
              <td class="xj">1533</td>
            </tr>
            <tr>
              <td class="ming"><img src="../assets/Rectangle 166.png" alt="">
                <div class="xiao">Redmi K30 5G</div>
              </td>
              <td class="dan">2599元</td>
              <td class="sl">
                <input type="text" placeholder="1">
              </td>
              <td class="xj">1533</td>
            </tr>
          </tbody>
        </table> -->
        <!-- <div class="botton">
          <div class="jxgw">
            <router-link to="/allShop">继续购物</router-link>
          </div>
          <div class="xiahua"></div>
          <div class="wenzi">
            共 <p class="num">2</p> 件商品，已选择 <p class="nums">0</p> 件
          </div>
          <div class="heji">合计：<p class="hejiyuan">0</p>
            <p class="yuan">元</p>
          </div>
          <div class="jiesuan">
            <router-link to="/address">去结算</router-link>
          </div>
        </div> -->
      <el-table ref="multipleTable" :data="tableData[index].products" tooltip-effect="dark" style="width: 100%"
         >
          <el-table-column label="" width="200">
            <template  slot-scope="scope">
            <el-image :src="' http://www.codeedu.com.cn/' +scope.row.productPicture" ></el-image>
          </template>
          </el-table-column>
          <el-table-column label="商品名称" width="400">
            <template slot-scope="scope">{{ scope.row.productName }}</template>
          </el-table-column>
          <el-table-column label="单价" width="120">
            <template slot-scope="scope">{{ scope.row.productSellingPrice }}</template>
          </el-table-column>
          <el-table-column label="数量" width="240">
            <template slot-scope="scope">{{ scope.row.num }}</template>
          </el-table-column>
          <el-table-column label="小计" width="120">
            <template slot-scope="scope">{{ scope.row.num * scope.row.productSellingPrice }}</template>
          </el-table-column>
          </el-table>
</div>
           <div class="botton">
          <div class="wenzi">
          共 <p class="num">{{ tableData[index].products.length }}</p> 件商品
          </div>
          <div class="heji">合计：<p class="hejiyuan">{{ total(tableData[index]) }}</p><p class="yuan">元</p>
          </div>
      </div>
      </div>
      
      <!-- <div class="botton">
          <div class="wenzi">
          共 <p class="num">2</p> 件商品
          </div>
          <div class="heji">合计：<p class="hejiyuan">0</p><p class="yuan">元</p>
          </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {orders} from "../api/api"
export default {
    name:'order',
    data(){
   return {
        tableData: [
        ],
 
        
      }
  },
  created() {
    this.orders()
  },
  methods: {
      //计数器
      handleChange(value) {
        console.log(value);
      },
      address(row){
        this.$router.push({
        path:'/address',
        query:{
          row:row
        }
    });
      },
      //查询订单
      orders(){
        orders().then(res=>{
          console.log(res);
          this.tableData = res.data.data
        })
      },
       total(data) {
      let total;
      const arr = data.products;
      arr.reduce(
        (pre, cru) => (total = pre + cru.num * cru.productSellingPrice),
        0
      );
      // console.log(total);
      return total;
    },

    },

  
}
</script>

<style scoped lang="scss">
/*.all{
  width: 1200px;
  height: 500px;
  background-color: #993b3b;
  margin: auto;
  margin-top: 47px;
}*/
.all{
    width: 1200px;
    margin: auto;
    background: #F5F5F5;
    min-height: calc(100vh  - 123px - 336px);
}
.top{
    width: 1200px;
    height: 80px;
    background: #FFFFFF;
    margin: auto;
}
.top-pic{
    width: 20px;
    height: 26px;
    margin-left: 0px;
    margin-top: 29px;

}
.colle{
    width: 140px;
    height: 28px;
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 100%;
    color: #333333;
    margin-top: -28px;
    margin-left: 30px;
}
.heng{
    width: 1920px;
    height: 1px;
    background: #FF6700;
    margin-left: 0;
}
.pic{
    margin: auto;
    width: 1200px;
    background: #ffffff;
    position: relative;
    margin-bottom: 70px;
}
.bianhao{
    width: 1164px;
    height: 16px;
    margin: auto;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

}
.bian{
    height: 16px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FF6700;
}
.shijian{
    height: 16px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #333333;

}
table {
  width: 1200px;
  position: relative;
  top: 0;
  left: 0;
}


.thcheck {
  width: 28px;
  height: 14px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #606266;
}

.tdcheck {
  width: 28px;
  height: 14px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #606266;
  text-align: left;
  margin-left: -30px;
}

.ming {
  display: flex;
  margin-top: 14px;
  margin-left: 40px;
}

.xiao {
  height: 100%;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 78px;
  text-align: center;
  color: #606266;
  transform: translate(36px,0);
}
.la{
  transform: translate(-156px,0);
}
.xj {
  width: 56px;
  height: 16px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #FF6700;
  transform: translate(-56px,0);
}

tr td {
  position: relative;
}

.botton {
  position: relative;
  width: 1200px;
  height: 48px;
  background: #FFFFFF;
}

thead tr {
  height: 82px;
}

tbody tr {
  height: 116px;
  line-height: 116px;
}


.jxgw a {
  position: absolute;
  width: 64px;
  height: 16px;
  left: 30px;
  top: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
  text-decoration: none;
}

.xiahua {
  position: absolute;
  width: 2px;
  height: 20px;
  left: 116px;
  top: 14px;
  background: #B0B0B0;
}

.wenzi {
  position: absolute;
  height: 16px;
  left: 143px;
  top: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
  display: flex;
}
.sl input {
  width: 62px;
  height: 30px;
  text-align: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: 1px solid #DCDFE6;
  transform: translate(-156px,0);
}

.wenzi p {
  margin-top: 0px;
  color: #FF6700;
}

.name {
  transform: translate(-25%, 0);
}
.dan{
  transform: translate(-100%, 0);
}
.heji {
  position: absolute;
  width: 300px;
  height: 32px;
  left: 862px;
  top: 8px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 56px;
  color: #FF6700;
  display: flex;
}

.heji p {
  margin-top: 0px;
  font-weight: 400;
  font-size: 33px;
  line-height: 44px;

}

table {
  margin-bottom: 24px;
}

.jiesuan {
  position: absolute;
  width: 200px;
  height: 48px;
  left: 1000px;
  top: 0px;
  background: #E0E0E0;
}

.thing-list {
  position: relative;
  width: 1200px;
  margin: auto;
}

.jiesuan a {
  position: absolute;
  height: 20px;
  left: 68px;
  top: 11px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #909399;
  text-decoration: none;
}
::v-deep.el-table .el-table__cell{
  text-align: center;
}
::v-deep.el-input__inner{
  border: 0px;
  padding: 0px 106px;
}
.Content {
    width: 100%;
    height: 598px;
    background: #f5f5f5;
    .content1 {
      width: 1200px;
      margin: auto;
      padding-top: 60px;
    }
    .content {
      width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: 50% 50%;
      padding-top: 60px;
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        span {
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 600;
          font-size: 36px;
          color: #b0b0b0;
          &:nth-child(1) {
            margin-top: 80px;
          }
          &:nth-child(2) {
            margin-top: 10px;

            font-size: 18px;
          }
        }
      }
    }
  }
</style>